<template>
  <div>
    <p>父组件传来的name：{{name}}</p>
    <p>父组件传来的age：{{age}}</p>
    <button @click="handleClick">点击我{{count}}</button>
    <div>
        <input type="text" v-model="text">
        <button @click="handleSubmit">提交</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
    import {defineProps,defineEmits,ref,watch} from "vue"

    let count = ref(0);

    let text = ref("");

    let props = defineProps({
        name: {
            type: String,
        },
        age: {
            type: Number,
        },
        changeText: {
            type: Function
        }
    })

    // 如果要监听props里面的参数，需要使用getter函数
    watch(() => props.age,(newVal,oldVal) => {
        console.log("age.newVal = ",newVal);
        console.log("age.oldVal = ",oldVal);
    })

    function handleSubmit() {
        props.changeText(text.value);
    }

    let emit = defineEmits();

    function handleClick() {
        emit("sendValue",++ count.value);
    }

    
</script>

<style scoped>

</style>